關於網頁應用程式的實際開發例子分享，前兩天講述了 Schema 與 MVC架構，今天來要說明 API(Application Programming Interface/應用程式介面) ：

使用 API 的過程時，你不需要知道其內部程式運作的邏輯或演算法，你只要告訴 API 它需要知道的事，它就會把你想知道的結果帶來給你。

API類似一個資料交換的平台 ，讓開發者能夠輕鬆利用其他系統的功能。像是開發登入功能會使用到Google or Facebook的API；開發旅遊系統，要提供使用者到達目的地最佳路徑，可使用Google Maps API；想開發自己的天氣預報APP，可使用中央氣象局API...族繁不及備載。

API在現代軟體開發中扮演著重要角色，幫助不同系統之間的協作，使應用程式能夠更加靈活和高效地運作。在WEB應用程式中，通常會將WEB切分成前端與後端，前端多半交由專業的設計人員撰寫切版，後端則是由系統人員撰寫連結資料庫與資料的處理， API就是處理後端的系統介面 。

常見的API類型包括：

• Web API：通過網路使用HTTP/HTTPS協議提供功能，ex. RESTful API。
• 函式庫 API：透過框架提供功能，ex. Highcharts API
• 作業系統 API：讓應用程式可以與作業系統進行互動，ex. WinAPI

API DEMO

接續昨天的範例，以下使用 新增 與 查詢 來撰寫寵物走失的頁面。

1. Model: 以Table為單位，將Table的欄位定義成Model中的參數，並寫好查詢的函數

    class findpet{
        public function Create()
        {
            $query = $this->db->prepare("INSERT INTO findpet (petType, petName, petbreeds, gender, age, weight, height, feature, picture, lostDate, lostCity, lostStreet, feederName, contactPhone) VALUES (:petType, :petName, :petbreeds, :gender, :age, :weight, :height, :feature, :picture, :lostDate, :lostCity, :lostStreet, :feederName, :contactPhone)");
            $query->bindParam("petType", $this->petType, PDO::PARAM_STR);
            $query->bindParam("petName", $this->petName, PDO::PARAM_STR);
            $query->bindParam("petbreeds", $this->petbreeds, PDO::PARAM_STR);
            $query->bindParam("gender", $this->gender, PDO::PARAM_STR);
            $query->bindParam("age", $this->age, PDO::PARAM_INT);
            $query->bindParam("weight", $this->weight, PDO::PARAM_INT);
            $query->bindParam("height", $this->height, PDO::PARAM_INT);
            $query->bindParam("feature", $this->feature, PDO::PARAM_STR);
            $query->bindParam("picture", $this->picture, PDO::PARAM_STR);
            $query->bindParam("lostDate", $this->lostDate, PDO::PARAM_STR);
            $query->bindParam("lostCity", $this->lostCity, PDO::PARAM_STR);
            $query->bindParam("lostStreet", $this->lostStreet, PDO::PARAM_STR);
            $query->bindParam("feederName", $this->feederName, PDO::PARAM_STR);
            $query->bindParam("contactPhone", $this->contactPhone, PDO::PARAM_STR);
   
            $query->execute();
            return $this->db->lastInsertId();
        }
   
        public function Read()
        {
            $query = $this->db->prepare("SELECT * FROM findpet");
            $query->execute();
            $this -> total=$query->rowCount();
            $this -> pageSize=3;
            $this -> totalPage=ceil($this -> total/$this->pageSize);
   
            $sql="SELECT * FROM findpet order by findpet_id ASC LIMIT ".($this -> page-1)*$this -> pageSize . " , " . $this -> pageSize;
            $queryData = $this->db->prepare($sql);
            $queryData->execute();
   
            $data = array();
            while ($row = $queryData->fetch(PDO::FETCH_ASSOC)) {
                $data[] = $row;
            }
   
            return $data;
        }
   

2. Controller: 負責接受前端回傳的資訊，並呼叫Model的函數來完成資料的傳遞

    function C()
    {
        $input = json_decode( $_POST['info'] , true);
        $objFindpet = new findpet();
        $objFindpet->petType=$input['petType'];
        $objFindpet->petName=$input['petName'];
        $objFindpet->petbreeds=$input['petbreeds'];
        $objFindpet->gender=$input['gender'];
        $objFindpet->age=$input['age'];
        $objFindpet->weight=$input['weight'];
        $objFindpet->height=$input['height'];
        $objFindpet->feature=$input['feature'];
        $objFindpet->picture=$input['picture'];
        $objFindpet->lostDate=$input['lostDate'];
        $objFindpet->lostCity=$input['lostCity'];
        $objFindpet->lostStreet=$input['lostStreet'];
        $objFindpet->feederName=$input['feederName'];
        $objFindpet->contactPhone=$input['contactPhone'];
   
        $objFindpet->Create();
    }
   
    function R()
    {
        $objFindpet = new findpet();
        if(isset($_GET['page']))
            $objFindpet -> setPage($_GET['page']);
        else
            $objFindpet -> page = 1;
   
        $datas = $objFindpet->Read();
        $pageArray = array("totalPage"=>$objFindpet -> totalPage, "currentPage"=>$objFindpet -> page, "pageSize"=>$objFindpet ->pageSize);
        array_push($datas, $pageArray);
        echo json_encode($datas);
    }
   
    if(isset($_POST['func'])!=""){
        if($_POST['func']=="C" )
            C();
    }
    if(isset($_GET['func'])){
        if($_GET['func']=="R" )
            R();
    }
   

3. View: 即前端頁面，也是使用者唯一與API互動的部分，通常會搭配JavaScript撰寫
   使用者可以用於填寫寵物資訊的表單(左圖) & 填寫後也會同步出現在系統中，供其他USER幫忙尋找(右圖)
   

Reference

• API 到底是什麼？ 用白話文帶你認識
• 後端工程師的第一堂課 (8) : 認識 API
• Node.js-Backend見聞錄(06)：關於後端觀念(二)-什麼是API?
• [Day 13 - 即時天氣] 建立一個即時天氣 App - 前置準備
• 網頁中加入「透過Facebook登入」功能